<!--
  停车场区域表列表管理页面
  User: YanZengBao
  Date: 2020-02-19
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" lang="zh">
<head>
    <meta charset="utf-8"/>
    <title>停车场区域表管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="" name="停车场区域表后台服务中心"/>
    <meta content="" name="GaoXiang"/>
    <th:block th:replace="body/head-page :: dva_head_page"/>
</head>

<body class="page-content-white  fade-in-up">

<!-- BEGIN CONTAINER -->
<div class="page-container">


    <!-- BEGIN PAGE TOOLS-->
    <!--查询条件示例 使用时取消hide样式-->
    <div class="portlet light ">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-paper-plane font-green-haze"></i>
                <span class="caption-subject bold font-green-haze uppercase">搜索</span>
                <span class="caption-helper">点击右侧搜索按钮开始检索</span>
            </div>
            <div class="tools">
                <a href="javascript:void(0);" class="collapse" data-original-title="收起" title="收起"></a>
                <a href="javascript:void(0);" class="fullscreen" data-original-title="全屏" title="全屏"></a>
            </div>
        </div>
        <div class="portlet-body">
            <div class="form-inline" role="form" id="table-param">

                <div class="form-group form-md-line-input has-success">
                    <input type="text" class="form-control" name="parkName" value="" placeholder="停车场名称">
                    <div class="form-control-focus"></div>
                </div>

                <div class="form-group form-md-line-input has-success">
                    <input type="text" class="form-control" name="name" value="" placeholder="区域名称">
                    <div class="form-control-focus"></div>
                </div>

                <div class="form-group form-md-line-input has-success">
                    <input type="text" class="form-control" name="number" value="" placeholder="区域编号">
                    <div class="form-control-focus"></div>
                </div>

                <button class="btn btn-success btn-tools-search"><i class="icon-magnifier"></i> 搜索</button>
                <button class="btn btn-danger btn-tools-reset" data-url-param="&current=1&size=10"><i
                        class="icon-reload"></i> 重置
                </button>
            </div>
        </div>
    </div>
    <!-- END PAGE TOOLS-->

    <!-- BEGIN PAGE TABLE-->
    <div class="portlet light">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-speech  font-blue-hoki"></i>
                <span class="caption-subject font-blue-hoki">停车场区域表数据表</span>
                <span class="caption-helper">
                    当前查询条件下有：<span class="show-page-total">0</span> 条数据，
                    总计：<span class="show-page-count">0</span> 页，
                    当前显示第：<span class="show-page-current">0</span> 页，
                    首行为第：<span class="show-page-begin">0</span> 条数据。
                    页面存在缓存数据，请您在操作后等待五分钟再刷新列表，或者点击右侧刷新按钮。
                </span>
            </div>

            <div class="tools">
                <a href="" class="collapse" data-original-title="" title=""> </a>
                <a href="" class="reload btn-tools-refresh" data-cache-name="dvaCache5M" data-original-title=""
                   title=""> </a>
                <a href="" class="fullscreen" data-original-title="" title=""> </a>
            </div>

        </div>
        <div class="table-toolbar hide">
            <div class="row">
                <div class="col-md-6">
                    <div shiro:hasPermission="'parkArea:add'" class="btn-group">
                        <a href="javascript:void(0);" class="btn green btn-module-add">
                            区域添加 <i class="fa fa-plus"></i>
                        </a>
                    </div>

                    <div class="btn-group">
                        <a href="javascript:bindParkinglot()" class="btn blue ">
                            区域分配车位 <i class="fa fa-plus"></i>
                        </a>
                    </div>

                    <div class="btn-group">
                        <a href="javascript:quickUnying()" class="btn btn-danger">
                            快速解绑车位 <i class="fa fa-plus"></i>
                        </a>
                    </div>

                </div>
                <div class="col-md-6 hide">
                    <div shiro:hasPermission="'parkArea:delete'" class="btn-group pull-right">
                        <button class="btn btn-danger btn-module-delete-all"> 批量删除 <i class="fa fa-times"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="portlet-body table-responsive">
            <div class="table-scrollable">
                <table th:data-page-size="${page['size']}"
                       th:data-current-page="${page['current']}"
                       th:data-total-counts="${page['total']}"
                       th:data-page-counts="${page.getPages()}"
                       data-visible-pages="10"
                       class="table table-bordered table-hover"
                       id="table">
                    <thead>
                    <tr>
                        <th class="table-checkbox">
                            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                <input type="checkbox" class="checkbox-all" title="全选"><span></span>
                            </label>
                        </th>
                        <th>区域名称</th>
                        <th>区域编号</th>
                        <th>停车场名称</th>
                        <!-- <th>预留字段（区域类型）</th>-->
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="data,iterStat : ${page.records}">
                        <td class="center">
                            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                <input type="checkbox" class="checkbox-child"
                                       title="选择此条数据" th:value="${data['id']}"><span></span>
                            </label>
                        </td>
                        <td th:title="${data['name']}" th:text="${#strings.abbreviate(data['name'],32)}"></td>
                        <td th:title="${data['number']}" th:text="${#strings.abbreviate(data['number'],32)}"></td>
                        <td th:title="${data['parkName']}" th:text="${#strings.abbreviate(data['parkName'],32)}"></td>
                        <!--<td th:title="${data['areaType']}" th:text="${data['areaType']}"></td>-->
                        <td th:title="${#dates.format(data['createTime'],'yyyy-MM-dd HH:mm:ss')}"
                            th:text="${#dates.format(data['createTime'],'yyyy-MM-dd HH:mm:ss')}"></td>

                        <td>
                            <div class="btn-group btn-group-xs btn-group-solid">
                                <button shiro:hasPermission="'parkArea:edit'" th:data-id="${data['id']}"
                                        class="btn btn-success btn-module-edit"> 查看\编辑
                                </button>
                                <button shiro:hasPermission="'parkArea:delete'" th:data-id="${data['id']}"
                                        class="btn btn-danger btn-module-delete"> 删除
                                </button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <ul class="pagination">
                <li>
                    <select class="form-control" id="pageSize">
                        <optgroup label="每页显示行数"></optgroup>
                        <option th:attr="selected=${page['size']==3?true:false}" value="3">3</option>
                        <option th:attr="selected=${page['size']==5?true:false}" value="5">5</option>
                        <option th:attr="selected=${page['size']==10?true:false}" value="10">10</option>
                        <option th:attr="selected=${page['size']==20?true:false}" value="20">20</option>
                        <option th:attr="selected=${page['size']==50?true:false}" value="50">50</option>
                        <option th:attr="selected=${page['size']>50?true:false}"
                                th:value="${page['size']}" th:text="'自定义：'+${page['size']}">自定义
                        </option>
                    </select>
                </li>
            </ul>
            <ul class="pagination" id="pagination"></ul>
        </div>
    </div>
    <!-- END PAGE TABLE-->
</div>
<!-- END CONTAINER -->
<th:block th:replace="body/javascript-page :: javascript_page"/>
<script>

    $(document).ready(function () {

        //初始化页面
        initList({
            table: "table",               //表格ID
            url: "/parkArea/page",           //表格分页url
            ajax: true                    //为true时伪静态刷新指定ID的table
        });

    });

    /**
     * 添加模块
     */
    function addModule() {
        tools.loadPage("/parkArea/add", null, function (html) {
            window.layer_addModule = layer.open({
                id: "addModule",
                type: 1,
                title: "停车场区域表添加",
                /* area:['900px','600px'],*/
                area: '900px',
                content: html,
                anim: 1,
                shadeClose: false,
                cancel: function () {
                }
            });
        });
    }

    //绑定车位
    function bindParkinglot() {
        let ids = getIds($('#table').find(".checkbox-child:checked"));
        // console.log(ids[0]);
        if (ids.length === 0 || ids.length > 1) {
            layer.msg("请选择一个区域", {icon: 2, time: 1000});
            return;
        } else {
            tools.loadPage("/parkArea/bindParkinglotHtml", {"areaId": ids[0]}, function (html) {
                window.layer_addModule = layer.open({
                    id: "addModule",
                    type: 1,
                    title: "区域分配车位",
                    /* area:['900px','600px'],*/
                    area: '900px',
                    content: html,
                    anim: 1,
                    shadeClose: false,
                    cancel: function () {
                    }
                });
            });
        }
    }

    /**
     * 编辑模块
     */
    function editModule(id) {
        tools.loadPage("/parkArea/edit", {"id": id}, function (html) {
            window.layer_editModule = layer.open({
                id: "editModule",
                type: 1,
                title: "停车场区域表编辑",
                /* area:['900px','600px'],*/
                area: '900px',
                content: html,
                anim: 1,
                shadeClose: false,
                cancel: function () {
                }
            });
        });
    }
    /**
     * 删除单个
     * @param id 要删除的id
     */
    function deleteById(id) {
        layer.confirm("确定删除么？", function () {
            tools.post("/parkArea/delete", {"id": id}, function (data) {
                if (data.success) {
                    layer.msg(data.message, {icon: 1, time: 1000}, function () {
                        //跳转到第一页
                        toPage(1);
                    });
                } else {
                    tools.errorTip(data.code,data.message);
                }
            });
        });
    }

    /**
     * 批量删除
     */
    function deleteByIds() {
        let ids = getIds($('#table').find(".checkbox-child:checked"));
        if (ids.length === 0) {
            layer.msg("请先选择要删除的条目！", {icon: 2, time: 1000});
            return;
        }
        layer.confirm("确定删除选中信息么？", function () {
            tools.post("/parkArea/deleteByIds", {"ids": ids.join(",")}, function (data) {
                if (data.success) {
                    layer.msg('批量删除成功！', {icon: 1, time: 1000}, function () {
                        //跳转到第一页
                        toPage(1);
                    });
                } else {
                    tools.errorTip(data);
                }
            });
        });
    }

    //区域快速解绑车位
    function quickUnying() {
        let ids = getIds($('#table').find(".checkbox-child:checked"));
        if (ids.length === 0 || ids.length > 1) {
            layer.msg("请选择一个区域操作", {icon: 2, time: 1000});
            return;
        } else {
            layer.confirm("确定解除该区域绑定的所有车位吗？", function () {
                tools.post("/parkinglot/quickUnying", {"areaId": ids[0]}, function (data) {
                    if (data.success) {
                        layer.msg(data.message, {icon: 1, time: 1000}, function () {
                            //跳转到第一页
                            toPage(1);
                        });
                    } else {
                        tools.errorTip(data.code,data.message);
                    }
                });
            });
        }
    }

</script>
</body>
</html>